<template>
	<view>
		<view class="fixed-bg-blue">
			<cu-custom bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">社保计算</block>
			</cu-custom>
			<view class="margin-lr margin-top radius-lg shadow shadow-lg bg-white padding-top-sm relative">
				<view class="cu-form-group solids-bottom">
					<view class="text-xxxl-important title">￥</view>
					<input placeholder="请输入社保缴纳金额" name="input" type="digit" :value="currentSocialSecurityAmount"
						class="text-xxxl-important text-left text-bold" :disabled="socialSecuritySelected !== 'custom'"
						@blur="changeSocialSecurityAmount" @confirm="changeSocialSecurityAmount"></input>
				</view>
				<view class="text-left margin-left-lg padding-tb-sm">
					社保缴纳基数范围：<text
						class="text-blue">{{socialRateBase.minSocialSecurityAmount}}~{{socialRateBase.maxSocialSecurityAmount}}</text>
				</view>
			</view>
		</view>
		<view class="padding text-center">
			<view class="flex flex-wrap justify-between align-center">
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='low'>
					<button class="cu-btn lg shadow"
						:class="socialSecuritySelected === 'low' ? 'bg-blue' : 'lines-blue'">最低</button>
				</view>
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='high'>
					<button class="cu-btn lg shadow"
						:class="socialSecuritySelected === 'high' ? 'bg-blue' : 'lines-blue'">全额</button>
				</view>
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='custom'>
					<button class="cu-btn lg shadow"
						:class="socialSecuritySelected === 'custom' ? 'bg-blue' : 'lines-blue'">自定义</button>
				</view>
				<view class="margin-tb-sm text-center" @tap="setPayRatio" data-selected='none'>
					<button class="cu-btn lg shadow"
						:class="socialSecuritySelected === 'none' ? 'bg-blue' : 'lines-blue'">不缴纳</button>
				</view>
			</view>

			<view class="radius-lg cu-card margin-top bg-white shadow shadow-lg">
				<view class="grid col-2">
					<view class="charts-box" style="height: 400upx">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
					<view class="grid col-3 text-center padding-right-sm">
						<block v-for="(item, index) in socialSecurityInfo.socialSecurityDetailList">
							<view class="flex align-center padding-xs" :style="'color:' + opts.color[index]">
								<view style="width: 100%;">{{ item.name.slice(0, 2) }}</view>
							</view>
							<view class="flex align-center padding-xs">
								<input placeholder="公司缴纳比例" type="digit" name="input" :value="item.companyProportion"
									class="solids-bottom" @blur="changeRate" confirm="changeRate" data-type="1"
									:data-index="index"></input>%
							</view>
							<view class="flex align-center padding-xs">
								<input placeholder="个人缴纳比例" type="digit" name="input" :value="item.personalProportion"
									class="solids-bottom" @blur="changeRate" confirm="changeRate" data-type="2"
									:data-index="index"></input>%
							</view>
						</block>
					</view>
				</view>
				<view class="padding-bottom-sm"><text>可自行编辑缴纳比例进行计算，</text><text class="text-blue"
						@tap="resetRate">点此重置</text></view>
			</view>

			<view class="radius-lg margin-top bg-white shadow">
				<view class="grid margin-bottom text-center col-4">
					<view class="padding-sm bg-blue">项目</view>
					<view class="padding-sm bg-blue">单位缴纳</view>
					<view class="padding-sm bg-blue">个人缴纳</view>
					<view class="padding-sm bg-blue">合计</view>

					<block v-for="(item, index) in socialSecurityInfo.socialSecurityDetailList">
						<view class="padding-sm" :style="'color:' + opts.color[index]">{{ item.name }}</view>
						<view class="padding-sm">{{ item.companyAmount }}</view>
						<view class="padding-sm">{{ item.personalAmount }}</view>
						<view class="padding-sm">{{ item.totalAmount }}</view>
					</block>
					<view class="padding-sm">合计</view>
					<view class="padding-sm">{{socialSecurityInfo.companyAmount}}</view>
					<view class="padding-sm">{{socialSecurityInfo.personalAmount}}</view>
					<view class="padding-sm">{{socialSecurityInfo.totalAmount}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		appMixin
	} from '@/store/app-mixin'
	import {
		getCalcAmount
	} from '@/utils/common'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#0081ff", "#8dc63f", "#fbbd08", "#e03997", "#1cbbb4", "#39b54a"],
					padding: [5, 5, 5, 5],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false
					},
					title: {
						name: "缴纳比例",
						fontSize: 16,
						color: "#000"
					},
					subtitle: {
						name: ''
					},
					extra: {
						ring: {
							ringWidth: 40,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 2,
							borderColor: "#FFFFFF",
							linearType: "custom"
						}
					}
				},
				// 社保基数
				currentSocialSecurityAmount: null
			};
		},
		watch: {
			calcResp(val) {
				this.initData()
			}
		},
		mixins: [appMixin],
		onReady() {

		},
		mounted() {
			// 防止当前页面刷新 丢失返回值
			if (this.calcResp.socialSecurityInfo) {
				this.initData()
			} else {
				this.$store.dispatch('calc')
			}
		},
		methods: {
			initData() {
				if (this.socialSecurityInfo) {
					const chartData = this.socialSecurityInfo.socialSecurityDetailList.map(item => {
						return {
							name: item.name,
							value: item.totalAmount
						}
					})
					let res = {
						series: [{
							data: chartData
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}
				this.currentSocialSecurityAmount = getCalcAmount(this.socialSecuritySelected, this.totalAmount, this
					.socialRateBase.minSocialSecurityAmount, this.socialRateBase.maxSocialSecurityAmount, this
					.socialSecurityAmount)
				this.selected = this.socialSecuritySelected
			},
			setPayRatio(e) {
				const selected = e.currentTarget.dataset.selected;
				this.$store.commit('SET_SOCIAL_SECURITY_SELECTED', selected);
				switch (selected) {
					case 'low':
						this.currentSocialSecurityAmount = this.socialRateBase.minSocialSecurityAmount
						break;
					case 'high':
						this.currentSocialSecurityAmount = Math.max(Math.min(this.socialRateBase.maxSocialSecurityAmount,
							this.totalAmount), this.socialRateBase.minSocialSecurityAmount)
						break;
					case 'custom':
						this.currentSocialSecurityAmount = null
						break;
					case 'none':
						this.currentSocialSecurityAmount = 0;
						break;
				}
				this.$store.dispatch('calc')
			},
			changeRate(e) {
				const {
					type,
					index
				} = e.currentTarget.dataset
				const value = e.detail.value
				let updSocialSecurityRateList = this.socialSecurityRateList ? this.socialSecurityRateList : JSON.parse(JSON
					.stringify(this.socialRateBase.socialSecurityRateList))
				if (type === '1') {
					updSocialSecurityRateList[index].companyRate = value
				} else {
					updSocialSecurityRateList[index].personalRate = value
				}
				this.$store.commit('SET_SOCIAL_SECURITY_RATE_LIST', updSocialSecurityRateList);
				this.$store.dispatch('calc')
			},
			resetRate() {
				this.$store.commit('SET_SOCIAL_SECURITY_RATE_LIST', null);
				this.$store.dispatch('calc')
			},
			changeSocialSecurityAmount(e) {
				this.currentSocialSecurityAmount = e.detail.value
				this.$store.commit('SET_SOCIAL_SECURITY_AMOUNT', this.currentSocialSecurityAmount);
				this.$store.dispatch('calc')
			}
		}
	};
</script>

<style scoped>

</style>